<template>
  <div class="patrol-plan-detail">
    <div class="container">
      <div class="form-header">
        <div class="form-title">
          <i class="el-icon-document"></i> 巡更计划详情
          <el-button 
            icon="el-icon-back" 
            class="back-button" 
            type="text" 
            size="medium" 
            @click="goBack">返回</el-button>
        </div>
        <div class="form-subtitle">查看巡更计划详细信息</div>
      </div>

      <el-card class="form-card">
        <div v-loading="loading" class="form-content">
          <div class="form-section">
            <div class="section-title">基本信息</div>
            
            <div class="form-item">
              <div class="form-label">所属小区：</div>
              <div class="form-control">
                <div class="detail-text">{{ communityName }}</div>
              </div>
            </div>

            <div class="form-item">
              <div class="form-label">巡更计划名称：</div>
              <div class="form-control">
                <div class="detail-text">{{ planDetail.planName }}</div>
              </div>
            </div>
          </div>

          <div class="form-section">
            <div class="section-title">时间设置</div>

            <div class="form-item">
              <div class="form-label">巡更频率：</div>
              <div class="form-control">
                <div class="detail-text">{{ cycleText }}</div>
              </div>
            </div>
            
            <div class="form-item" v-if="planDetail.cycle === '每周'">
              <div class="form-label">选择星期：</div>
              <div class="form-control">
                <div class="detail-text">{{ weekdaysText }}</div>
              </div>
            </div>
            
            <div class="form-item" v-if="planDetail.cycle === '每月'">
              <div class="form-label">选择日期：</div>
              <div class="form-control">
                <div class="detail-text">{{ monthDaysText }}</div>
              </div>
            </div>

            <div class="form-item">
              <div class="form-label">巡更时间：</div>
              <div class="form-control">
                <div class="detail-text">{{ patrolTimeText }}</div>
              </div>
            </div>
          </div>

          <div class="form-section">
            <div class="section-title">巡更设置</div>
            
            <div class="form-item">
              <div class="form-label">所选路线：</div>
              <div class="form-control">
                <div class="detail-text">{{ planDetail.route || '-' }}</div>
              </div>
            </div>

            <div class="form-item">
              <div class="form-label">备注：</div>
              <div class="form-control">
                <div class="detail-text">{{ planDetail.remark || '-' }}</div>
              </div>
            </div>

            <div class="form-item">
              <div class="form-label">状态：</div>
              <div class="form-control">
                <el-tag :type="planDetail.status === 1 ? 'success' : 'info'">
                  {{ planDetail.status === 1 ? '启用' : '禁用' }}
                </el-tag>
              </div>
            </div>
          </div>
        </div>

        <div class="form-actions">
          <el-button type="primary" @click="goToEdit" icon="el-icon-edit">编辑</el-button>
          <el-button @click="goBack" icon="el-icon-back">返回</el-button>
        </div>
      </el-card>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      planId: null,
      loading: false,
      planDetail: {
        planId: '',
        communityId: '',
        planName: '',
        cycle: '',
        cycleRule: '',
        startTime: '',
        routeId: '',
        route: '',
        status: 1,
        remark: ''
      },
      communityName: '',
      weekdayMap: {
        '0': '周日',
        '1': '周一',
        '2': '周二',
        '3': '周三',
        '4': '周四',
        '5': '周五',
        '6': '周六'
      }
    }
  },

  computed: {
    cycleText() {
      return this.planDetail.cycle || '-';
    },
    
    weekdaysText() {
      if (!this.planDetail.cycleRule) return '-';
      
      return this.planDetail.cycleRule.split(',')
        .map(day => this.weekdayMap[day.trim()] || '')
        .filter(day => day)
        .join('、');
    },
    
    monthDaysText() {
      if (!this.planDetail.cycleRule) return '-';
      
      return this.planDetail.cycleRule.split(',')
        .map(day => day.trim() + '号')
        .join('、');
    },
    
    patrolTimeText() {
      if (!this.planDetail.startTime) return '-';
      
      // 如果是完整的时间格式，只显示时:分
      if (typeof this.planDetail.startTime === 'string' && this.planDetail.startTime.includes(':')) {
        const timeParts = this.planDetail.startTime.split(':');
        if (timeParts.length >= 2) {
          return `${timeParts[0]}:${timeParts[1]}`;
        }
      }
      
      return this.planDetail.startTime;
    }
  },

  methods: {
    goBack() {
      this.$router.go(-1);
    },
    
    goToEdit() {
      this.$router.push({
        path: '/patrolPlanEdit',
        query: { planId: this.planId }
      });
    },
    
    fetchPlanDetail() {
      this.loading = true;
      this.$axios.get(`api/patrol-server/patrolPlan/queryById/${this.planId}`)
        .then(response => {
          if (response.data && response.data.code === 200) {
            this.planDetail = response.data.data;
            
            // 获取社区名称
            if (this.planDetail.communityId) {
              this.fetchCommunityName(this.planDetail.communityId);
            }
          } else {
            this.$message.error(response.data?.message || '获取巡更计划详情失败');
          }
        })
        .catch(error => {
          console.error('获取巡更计划详情出错:', error);
          this.$message.error('获取巡更计划详情失败，请稍后再试');
        })
        .finally(() => {
          this.loading = false;
        });
    },
    
    fetchCommunityName(communityId) {
      // 直接从社区列表接口获取所有社区信息
      this.$axios.get('api/infrastructure-server/community/queryAll')
        .then(response => {
          if (response.data && response.data.code === 200) {
           const communityList = response.data.data;
            const community = communityList.find(item => item.id == communityId);
            if (community) {
              this.communityName = community.name;
            } else {
              this.communityName = '-';
            }
          } else {
            this.communityName = '-';
          }
        })
        .catch(error => {
          console.error('获取社区名称错误:', error);
          this.communityName = '-';
        });
    }
  },
  
  created() {
    // 获取路由参数中的ID
    this.planId = this.$route.query.planId;
    if (!this.planId) {
      this.$message.error('未获取到巡更计划ID，请返回列表重试');
      return;
    }
    
    // 获取巡更计划详情
    this.fetchPlanDetail();
  }
}
</script>

<style scoped>
.patrol-plan-detail {
  background-color: #f5f7fa;
  padding: 20px;
  min-height: 100%;
  display: flex;
  justify-content: center;
}

.container {
  width: 100%;
  max-width: 800px;
}

.form-header {
  margin-bottom: 20px;
  text-align: center;
  position: relative;
}

.back-button {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  font-size: 14px;
  padding: 0;
}

.form-title {
  font-size: 22px;
  font-weight: bold;
  color: #303133;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.form-title i {
  margin-right: 10px;
  font-size: 24px;
}

.form-subtitle {
  color: #909399;
  font-size: 14px;
}

.form-card {
  margin-bottom: 20px;
  border-radius: 8px;
  box-shadow: 0 4px 18px 0 rgba(0, 0, 0, 0.1);
}

.form-content {
  padding: 10px 30px;
  min-height: 400px;
}

.form-section {
  margin-bottom: 30px;
  border-bottom: 1px solid #ebeef5;
  padding-bottom: 15px;
}

.form-section:last-child {
  border-bottom: none;
}

.section-title {
  font-size: 16px;
  font-weight: 600;
  color: #409EFF;
  margin-bottom: 22px;
  padding-left: 10px;
  border-left: 4px solid #409EFF;
}

.form-item {
  margin-bottom: 25px;
  display: flex;
  align-items: flex-start;
}

.form-label {
  width: 120px;
  text-align: right;
  padding-right: 12px;
  color: #606266;
  line-height: 24px;
  font-size: 14px;
}

.form-control {
  flex: 1;
}

.detail-text {
  line-height: 24px;
  font-size: 14px;
  color: #303133;
  word-break: break-word;
}

.form-actions {
  margin-top: 30px;
  padding: 20px;
  text-align: center;
  border-top: 1px solid #ebeef5;
}

.form-actions .el-button {
  padding: 12px 25px;
  min-width: 120px;
  margin: 0 15px;
}

/* 移动端适配 */
@media screen and (max-width: 768px) {
  .form-item {
    flex-direction: column;
  }
  
  .form-label {
    width: 100%;
    text-align: left;
    padding-right: 0;
    margin-bottom: 8px;
    line-height: normal;
  }
  
  .back-button {
    position: relative;
    transform: none;
    margin-bottom: 10px;
    display: block;
    left: auto;
    top: auto;
  }
  
  .form-title {
    flex-direction: column;
  }
}
</style>